<!DOCTYPE html>
<html>

<head>
    <title>计算器</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/cal.css">
    <script src="js/cal.js"></script>
</head>

<body>
    <!--标准型-->
    <div class="standard-main" id="std-main">
        <!--结果显示区域-->
        <div class="result">
            <!--显示类型信息-->
            <div class="type" id="std-show-bar">
                ☰&nbsp;&nbsp;&nbsp;标准
            </div>
            <!--上一步的结果-->
            <div class="pre" id="std-pre-step">
                &nbsp;
            </div>
            <!--第二个/运算结果-->
            <div class="second" id="std-show-input">0</div>
        </div>
        <ul id="std-top-symbol">
            <li value="17">%</li>
            <li value="18">√</li>
            <li value="19"><img src="images/x_2.png" style="height: 18px;" /></li>
            <li value="20"><img src="images/1_x.png" /></li>
        </ul>
        <!--数字和符号-->
        <ul id="std-num-symbol">
            <li value="37">CE</li>
            <li value="38">C</li>
            <li value="39">Back</li>
            <li value="16">÷</li>
            <li class="number" value="7">7</li>
            <li class="number" value="8">8</li>
            <li class="number" value="9">9</li>
            <li value="15">×</li>
            <li class="number" value="4">4</li>
            <li class="number" value="5">5</li>
            <li class="number" value="6">6</li>
            <li value="14">-</li>
            <li class="number" value="1">1</li>
            <li class="number" value="2">2</li>
            <li class="number" value="3">3</li>
            <li value="13">+</li>
            <li value="11">±</li>
            <li class="number" value="0">0</li>
            <li value="10">.</li>
            <li value="12">=</li>
        </ul>
        <!--侧边栏，选择计算器类型-->
        <ul class="type-bar" id="std-type-bar">
            <li class="active">标准</li>
            <li value="2">科学</li>
            <li value="3">程序员</li>
        </ul>
    </div>
    <!--科学型-->
    <div class="science-main" id="sci-main">
        <!--结果显示区域-->
        <div class="sci-result">
            <!--显示类型信息-->
            <div class="type" id="sci-show-bar">
                ☰&nbsp;&nbsp;&nbsp;科学
            </div>
            <!--上一步的结果-->
            <div class="pre" id="sci-pre-step">
                &nbsp;
            </div>
            <!--第二个/运算结果-->
            <div class="second" id="sci-show-input">0</div>
        </div>
        <!--上面的3行运算符-->
        <ul id="sci-top-symbol">
            <li value="21">(</li>
            <li value="22">)</li>
            <li value="23"><img src="images/x_y_sqrt.png" style="height: 18px;width: 22px;" /></li>
            <li value="24">n!</li>
            <li value="25">Exp</li>
            <li value="19"><img src="images/x_2.png" style="height: 18px;" /></li>
            <li value="26"><img src="images/x_y.png" style="height: 18px;" /></li>
            <li value="27">sin</li>
            <li value="28">cos</li>
            <li value="29">tan</li>
            <li value="30"><img src="images/10_x.png" /></li>
            <li value="31">log</li>
            <li value="32">sinh</li>
            <li value="33">cosh</li>
            <li value="34">tanh</li>
        </ul>
        <!--数字和符号-->
        <ul id="sci-num-symbol">
            <li value="35">π</li>
            <li value="37">CE</li>
            <li value="38">C</li>
            <li value="39">Back</li>
            <li value="16">÷</li>
            <li value="18">√</li>
            <li value="7" class="number">7</li>
            <li value="8" class="number">8</li>
            <li value="9" class="number">9</li>
            <li value="15">×</li>
            <li value="17">%</li>
            <li value="4" class="number">4</li>
            <li value="5" class="number">5</li>
            <li value="6" class="number">6</li>
            <li value="14">-</li>
            <li value="20"><img src="images/1_x.png" /></li>
            <li value="1" class="number">1</li>
            <li value="2" class="number">2</li>
            <li value="3" class="number">3</li>
            <li value="13">+</li>
            <li value="36">↑</li>
            <li value="11">±</li>
            <li value="0" class="number">0</li>
            <li value="10">.</li>
            <li value="12">=</li>
        </ul>
        <!--侧边栏，选择计算器类型-->
        <ul class="type-bar" id="sci-type-bar">
            <li value="1">标准</li>
            <li class="active">科学</li>
            <li value="3">程序员</li>
        </ul>
    </div>
    <!--程序员型-->
    <div class="programmer-main" id="pro-main">
        <!--结果显示区域-->
        <div class="pro-result">
            <!--显示类型信息-->
            <div class="type" id="pro-show-bar">
                ☰&nbsp;&nbsp;&nbsp;程序员
            </div>
            <!--上一步的结果-->
            <div class="pre" id="pro-pre-step">
                &nbsp;
            </div>
            <!--第二个/运算结果-->
            <div class="second" id="pro-show-input">0</div>
            <!--显示16、10、8、2进制的值-->
            <div id="pro-scales">
                <div scale="16">HEX&nbsp;&nbsp;&nbsp;<span>0</span></div>
                <div scale="10" class="scale-active">DEC&nbsp;&nbsp;&nbsp;<span>0</span></div>
                <div scale="8">OCT&nbsp;&nbsp;&nbsp;<span>0</span></div>
                <div scale="2">BIN&nbsp;&nbsp;&nbsp;&nbsp;<span>0</span></div>
            </div>
        </div>
        <!--上面的一行十六进制数字，因为默认是10进制，所以这些按钮默认禁用-->
        <ul id="pro-top-symbol">
            <li class="disable-btn" value="40">A</li>
            <li class="disable-btn" value="41">B</li>
            <li class="disable-btn" value="42">C</li>
            <li class="disable-btn" value="43">D</li>
            <li class="disable-btn" value="44">E</li>
            <li class="disable-btn" value="45">F</li>
        </ul>
        <!--数字和符号-->
        <ul id="pro-num-symbol">
            <li value="36">↑</li>
            <li value="37">CE</li>
            <li value="38">C</li>
            <li value="39">Back</li>
            <li value="16">÷</li>
            <li value="46">And</li>
            <li value="7" class="number" bin-disable="1">7</li>
            <li value="8" class="number" oct-disable="1" bin-disable="1">8</li>
            <li value="9" class="number" oct-disable="1" bin-disable="1">9</li>
            <li value="15">×</li>
            <li value="47">Or</li>
            <li value="4" class="number" bin-disable="1">4</li>
            <li value="5" class="number" bin-disable="1">5</li>
            <li value="6" class="number" bin-disable="1">6</li>
            <li value="14">-</li>
            <li value="48">Not</li>
            <li value="1" class="number">1</li>
            <li value="2" class="number" bin-disable="1">2</li>
            <li value="3" class="number" bin-disable="1">3</li>
            <li value="13">+</li>
            <li value="21">(</li>
            <li value="22">)</li>
            <li value="0" class="number">0</li>
            <li value="10" class="disable-btn" id="pro-point">.</li>
            <li value="12">=</li>
        </ul>
        <!--侧边栏，选择计算器类型-->
        <ul class="type-bar" id="pro-type-bar">
            <li value="1">标准</li>
            <li value="2">科学</li>
            <li class="active">程序员</li>
        </ul>
    </div>
</body>

</html>